<script setup>
import { ref, onMounted, watch } from "vue";
import { useRoute } from "vue-router";
import { use_app_state_store } from "@/stores/systemStatus.js";
import { storeToRefs } from "pinia";
import BottomNavigation from "@/a-components/less/BottomNav.vue";
import CommonFooter from "@/a-views/CommonFooter.vue";
import RecommendItem from "@/a-components/less/RecommendItem.vue";
import ContactItem from "@/a-components/less/ContactItem.vue";

// 状态管理
const appStates = use_app_state_store();
const { musicPlayerState, contacts, recommendItems } = storeToRefs(appStates);

// 路由
const route = useRoute();
const musicPlayerBorderRadius = ref("50px 50px 0 0");
let map;

// 监听音乐播放器状态变化
const musicPlayerStateChange = (fixed) => {
  musicPlayerBorderRadius.value = fixed ? "0 0 50px 50px" : "50px 50px 0 0";
};

// 监听 URL 变化
watch(
  () => route.hash,
  (newValue) => {
    console.log("路由哈希值变化:", newValue);
  },
  { immediate: true }
);


// 组件挂载时初始化地图
onMounted(() => {
  const BMapGL = window.BMapGL;
  map = new BMapGL.Map("map"); // 创建地图实例
  const point = new BMapGL.Point(118.93995, 32.11307); // 南京师范大学坐标
  map.centerAndZoom(point, 15); // 设置地图中心点和缩放级别
  map.enableScrollWheelZoom(true); // 允许鼠标滚轮缩放

  // 设置深色主题
  const mapStyle = { style: "dark" };
  map.setMapStyleV2(mapStyle);

  // 添加标记（Marker）
  const marker = new BMapGL.Marker(point);
  map.addOverlay(marker);

  // 添加信息窗口
  const infoWindow = new BMapGL.InfoWindow("南京市栖霞区文苑路一号南京师范大学，邮编：211000", {
    width: 200,
    height: 100,
    title: "南京师范大学",
  });
  marker.addEventListener("click", () => {
    map.openInfoWindow(infoWindow, point);
  });
});
</script>

<template>
  <el-backtop :right="10" :bottom="10" />

  <div class="full-screen">
    <div id="index" class="index">
      <div class="content">
        <div class="introduce">
          <img src="@/assets/img/opengms-logo.png" />
          <h1>全国高等师范院校《地球概论》教学研究会第二十二次会议</h1>
          <h3>以GIS，创未来</h3>
        </div>
      </div>

      <el-affix
        class="music-player"
        @change="musicPlayerStateChange"
        :offset="musicPlayerState.offset"
        :z-index="99"
      >
        <BottomNavigation
          :style="{ borderRadius: musicPlayerBorderRadius }"
        ></BottomNavigation>
      </el-affix>
    </div>
    <!--   -offset实现在js中添加后缀实现平滑滚动，否则与默认的hash定位冲突就会是瞬间滚动 -->
    <section id="about-offset" class="about">
      <div class="content">
        <img src="@/assets/img/convention.png" alt="" />
        <div class="detail item">
          <h2>会议简介</h2>
          <p>
            9月21日，由全国高等师范院校《地球概论》教学研究会主办，我校旅游与地理科学学院和吉林省高等学校师资培训中心承办的全国高等师范院校《地球概论》教学研究会第二十次（第十七届）会议在我校长春校区举行。校党委常委、副校长曲殿彬出席开幕式并讲话。福建师范大学余明教授、中国科学院国家授时中心科普主管刘建荣、东北师范大学王向东教授、华中师范大学王宏志教授等20余位知名专家学者，以及来自东北师范大学、华中师范大学、陕西师范大学、南京师范大学、福建师范大学和我校等20余所高校的学者、研究生50余人参会。
          </p>
          <RouterLink to="/menu" class="more">更多</RouterLink>
        </div>
      </div>
    </section>
    <div id="recommend-offset" class="recommend">
      <div class="content">
        <h2 class="title">推荐网址</h2>
        <div class="titles">
          <!--                    <RecommendItem v-for="(item,index) in blogs"
                                                       :key="index"
                                                       bean="item">
                                        </RecommendItem>-->
          <RecommendItem
            v-for="(item, index) in recommendItems"
            :key="index"
            :bean="item"
          />
        </div>
      </div>
    </div>

    <div id="contact-offset" class="contact">
      <div class="content">
        <h2 class="title">联系我们</h2>
        <div class="contact-info-container">
          <ContactItem
            v-for="(item, index) in contacts"
            :key="index"
            :bean="item"
          ></ContactItem>
        </div>
        <div id="map" style="width: 100%; height: 500px;"></div>
      </div>
    </div>

    <CommonFooter id="declare-offset" />
  </div>
</template>

<style scoped lang="less">
@import "@/assets/main.less";

.item {
  width: 100%;
  background-color: white;
}

.full-screen {
  .m-bg;
  width: 100%;
  min-height: 100vh;
  font-size: 16px;

  .index {
    padding: @headerHeight 0 0 0;
    height: 100vh;
    display: flex;
    flex-direction: column;

    .content {
      .m-reactive-box;
      color: @dark-font-color;
      flex: 1;
      display: flex;
      flex-direction: column;
      place-items: center center;

      .introduce {
        display: flex;
        flex: 1;
        flex-direction: column;
        place-items: center center;
        place-content: center;

        img {
          width: 500px;
          max-width: 100%;
          max-height: 500px;
        }
      }

      .links {
        font-size: 1.2em;
        padding: 20px 0;

        display: flex;
        gap: 0 12px;
        place-items: center;
        flex-wrap: wrap;

        a {
          .m-a-1();
          color: @light-link-color;
        }
      }
    }

    .music-player {
      width: 100%;
      height: fit-content;
    }
  }

  .about {
    width: 100%;
    background-color: white;
    padding: 0 8px 15px;

    .content {
      .m-reactive-box;
      min-height: 40vh;
      display: grid;
      grid-template-columns: repeat(2, 1fr);

      place-content: center;
      place-items: center;

      color: @light-font-color;

      @media (max-width: 650px) {
        grid-template-columns: 1fr;
      }

      img {
        width: 80%;
        @media (max-width: 300px) {
          width: 100%;
        }
      }

      .detail {
        width: 100%;
        place-self: center;

        h2 {
          line-height: 50%;
          padding: 0.8em 0;
        }

        P {
          padding: 10px;
          font-size: 1em;
          color: #000; // 改为黑色
          letter-spacing: 0.1em; // 增大字体间距
          line-height: 1.6; // 增加行间距
        }

        .more {
          display: inline-block;
          margin: 0px 0px 0;
          font-size: 1em;
          padding: 10px 18px;
          border: @light-theme-color solid 1px;
          color: inherit;

          &:hover {
            background: @light-theme-color;
            color: white;
          }
        }

        .icons {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -ms-flex-wrap: wrap;
          flex-wrap: wrap;
          gap: 0.5em 1em;

          margin: 20px 0px 15px;

          .icon {
            display: flex;
            flex-direction: column;
            place-items: center;
            background: #eee;
            text-align: center;
            -webkit-box-flex: 1;
            -ms-flex: 1 1 8em;
            flex: 1 1 8em;
            padding: 5px 0;
            border-radius: 15px;

            i {
              font-size: 3rem;
              color: @light-theme-color;

              span {
                display: flex;
                place-items: center;
                place-content: center;
              }
            }

            h3 {
              text-transform: capitalize;
              color: #222;
            }
          }
        }
      }
    }
  }

  .recommend {
    width: 100%;
    background-color: #eee;
    padding: 10px 24px 20px;

    .content {
      .m-reactive-box;

      .title {
        letter-spacing: 0.3em;
        text-align: center;
      }

      .titles {
        display: -ms-grid;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;

        @media (max-width: 1300px) {
          grid-template-columns: repeat(3, 1fr);
        }
        @media (max-width: 900px) {
          grid-template-columns: repeat(2, 1fr);
          gap: 1em 1em;
        }
        @media (max-width: 500px) {
          grid-template-columns: 1fr;
        }
      }
    }
  }

  .contact {
    width: 100%;
    background-color: white;
    padding: 10px 8px 10px;
    text-align: center;

    .content {
      .m-reactive-box;

      .contact-info-container {
        display: -ms-grid;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 1em 2em;
        margin-bottom: 1rem;

        @media (max-width: 1000px) {
          grid-template-columns: repeat(3, 1fr);
        }
        @media (max-width: 600px) {
          grid-template-columns: repeat(2, 1fr);
          gap: 1em 1em;
        }
        @media (max-width: 340px) {
          grid-template-columns: 1fr;
        }
      }

      iframe {
        width: 100%;
        max-height: 50vh;
      }
    }
  }
}
.map-container {
  width: 100%;
  max-height: 50vh;
}
</style>
